<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>现货网-首页</title>
    <script type="text/javascript" src="lib/jquery-1.12.4.min.js"></script>
    <!--[if lte IE 9]>
    <script type='text/javascript' src='lib/jquery.xdomainrequest.min.js'></script>
    <script type='text/javascript' src='lib/json2.js'></script>
    <![endif]-->
    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="lib/layui/css/layui.css">
    <script type="text/javascript" src="lib/layui/layui.js"></script>
    <script type="text/javascript" src="lib/moment.js"></script>
    <link rel="stylesheet" href="lib/mmGrid/mmGrid.css">
    <link rel="stylesheet" href="lib/mmGrid/mmPaginator.css">
    <link rel="stylesheet" href="lib/mmGrid/mmGrid-bootstrap.css">
    <script type="text/javascript" src="lib/mmGrid/mmGrid.js"></script>
    <script type="text/javascript" src="lib/mmGrid/mmPaginator.js"></script>
    <!-- <script type="text/javascript" src="lib/lib.js"></script> -->
    <!-- <script type="text/javascript" src="lib/api.js"></script> -->
    <script>
        document.write('<link rel="stylesheet" href="lib/common.css?t=' + new Date().getTime() + '">')
        document.write('<script src="lib/lib.js?t=' + new Date().getTime() + '"><\/script\>')
        document.write('<script src="lib/api.js?t=' + new Date().getTime() + '"><\/script\>')
    </script>

</head>
<body>
<style>
    html,body{
        overflow: hidden;
        background: #EBEBEB;
    }
    .mainContent{
        width: 1366px;
        margin: auto;
    }

    .btn-group button{
        margin-left: 5px!important;
    }
    .form-inline{
        text-align: center;
        margin-top: 20px;
    }
    .form-inline label{
        margin-left: 20px;
    }
    .logoBox{
        width: 100px;
        height: 90px;
        border: 1px solid #cccccc;
        position: fixed;
        background: #FFFFFF;
        top: 5px;
        text-align: center;
    }

    .logoBox img{
        width: 50px;
        display: block;
        margin: auto;
    }

    .layui-laypage select{
        width: 80px;
    }
    .adsBox{
        width: 100%;
        overflow: auto;
        background: #E8E8E8;
    }
    .chatBox{
        border: 1px solid #ccc;
        background: #F5F5F5;
        position: relative;
    }
    .adsBox img{
        width: 100%;
        height: 100px;
    }

    .msgBox{
        overflow: auto;
        margin-top: 10px;
    }


    .msgBox img{
        width: 45px;
        height: 45px;
        margin: 5px 5px 0 5px;
    }
    .msgBox .message{
        max-width: 60%;
        min-width: 30%;
        border: 1px solid #ccc;
        padding: 10px;
        min-height: 35px;
    }

    .left .message{
        float: left;
        border-radius: 0 5px 5px 0;
        background: #ffffff;
    }

    .left img{
        float: left;
    }

    .right .message{
        float: right;
        border-radius: 5px 0 0 5px;
        background: #22c08b;
    }
    .right img{
        float: right;
    }

</style>
<div class="mainContent">
    <div class="row-fluid"
         style="padding: 5px;background: #FFFFFF;margin-top: 10px;margin-bottom: 45px; border: 1px solid #cccccc;">
        <div class="span5" style="text-align: center;">
            <div class="btn-group">
                <button class="btn btn-primary" onclick="showMember()">会员状态</button>
                <button class="btn btn-primary" onclick="showDownload()">移动端下载</button>
                <button class="btn btn-primary" id="logout" onclick="logout()">退出</button>
            </div>
        </div>
        <div class="span2">
            <div class="logoBox">
                <img src="images/logo.png" alt="">
                <span id="timeBox"></span>
            </div>
        </div>
        <div class="span5" style="text-align: center;">
            <div class="row-fluid">
                <div class="span3">
                    <div>我的询价次数</div>
                    <div id="inquiriesNum">0</div>
                </div>
                <div class="span3">
                    <div>上传库存次数</div>
                    <div id="uploadStockNum">0</div>
                </div>
                <div class="span3">
                    <div>被投诉次数</div>
                    <div id="complainedNum">0</div>
                </div>
                <div class="span3">
                    <div>账户同时在线设备</div>
                    <div id="onlineDeviceNum">0</div>
                </div>
            </div>
        </div>
    </div>
    <form class="form-inline">
        <label>
            品种
            <input id="varieties" type="text" class="input-small" placeholder="">
        </label>
        <label>
            规格
            <input id="spec" type="text" class="input-small" placeholder="">
        </label>
        <label>
            材质
            <input id="textureMaterial" type="text" class="input-small" placeholder="">
        </label>
        <label>
            产地
            <input id="place" type="text" class="input-small" placeholder="">
        </label>
        <label>
            公司简称
            <input id="company" type="text" class="input-small" placeholder="">
        </label>
        <button type="button" class="btn" id="searchBtn" onclick="search()">开始搜索</button>
    </form>

    <div class="row-fluid" id="mainBox">
        <div class="span2 adsBox">
            <img src="images/code.png" alt="" srcset="">
            <img src="images/code.png" alt="" srcset="">
            <img src="images/code.png" alt="" srcset="">
            <img src="images/code.png" alt="" srcset="">
            <img src="images/code.png" alt="" srcset="">
            <img src="images/code.png" alt="" srcset="">
            <img src="images/code.png" alt="" srcset="">
            <img src="images/code.png" alt="" srcset="">
            <img src="images/code.png" alt="" srcset="">
        </div>
        <div class="span8">
            <table id="mmg" class="mmg" style="width: 100%;">
                <tr>
                    <th rowspan="" colspan=""></th>
                </tr>
            </table>
            <div id="pg" style="text-align: right;"></div>
        </div>
        <div class="span2" style="height: 100%;">
            <div class="chatBox">
                <div style="text-align: center;line-height: 30px;">
                    聊天室当前在线人数：<span id="online">0</span>
                </div>
                <div id="msgBox" style="height: 85%;overflow: auto;">
<!--                    <div class="msgBox right">-->
<!--                        <img src="./images/user.jpg" alt="">-->
<!--                        <div class="message"></div>-->
<!--                    </div>-->
<!--                    <div class="msgBox left">-->
<!--                        <img src="./images/user.jpg" alt="">-->
<!--                        <div class="message"></div>-->
<!--                    </div>-->
                </div>
                <div class="row-fluid" style="height: 10%;position: absolute;bottom: 0;">
                    <div class="span8" style="height: 100%;text-align: center;">
                        <textarea name="" id="msgInput" rows="3" style="width: 90%;height: 86%; resize: none;display: inline-block;"></textarea>
                    </div>
                    <div class="span4" style="height: 100%;text-align: left;">
                        <button type="button" class="btn" id="sendBtn" style="width: 95%;height: 86%;" onclick="sendMsg()">发送</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

<script type="text/javascript">
    var laypage,
        layer,
        mmg,
        current=1,
        size=20,
        msgId,
        loading;

    moment.locale('zh-cn', {
        months: '一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月'.split('_'),
        monthsShort: '1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月'.split('_'),
        weekdays: '星期日_星期一_星期二_星期三_星期四_星期五_星期六'.split('_'),
        weekdaysShort: '周日_周一_周二_周三_周四_周五_周六'.split('_'),
        weekdaysMin: '日_一_二_三_四_五_六'.split('_'),
        longDateFormat: {
            LT: 'HH:mm',
            LTS: 'HH:mm:ss',
            L: 'YYYY-MM-DD',
            LL: 'YYYY年MM月DD日',
            LLL: 'YYYY年MM月DD日Ah点mm分',
            LLLL: 'YYYY年MM月DD日ddddAh点mm分',
            l: 'YYYY-M-D',
            ll: 'YYYY年M月D日',
            lll: 'YYYY年M月D日 HH:mm',
            llll: 'YYYY年M月D日dddd HH:mm'
        },
        meridiemParse: /凌晨|早上|上午|中午|下午|晚上/,
        meridiemHour: function (hour, meridiem) {
            if (hour === 12) {
                hour = 0;
            }
            if (meridiem === '凌晨' || meridiem === '早上' ||
                meridiem === '上午') {
                return hour;
            } else if (meridiem === '下午' || meridiem === '晚上') {
                return hour + 12;
            } else {
                // '中午'
                return hour >= 11 ? hour : hour + 12;
            }
        },
        meridiem: function (hour, minute, isLower) {
            var hm = hour * 100 + minute;
            if (hm < 600) {
                return '凌晨';
            } else if (hm < 900) {
                return '早上';
            } else if (hm < 1130) {
                return '上午';
            } else if (hm < 1230) {
                return '中午';
            } else if (hm < 1800) {
                return '下午';
            } else {
                return '晚上';
            }
        },
        calendar: {
            sameDay: '[今天]LT',
            nextDay: '[明天]LT',
            nextWeek: '[下]ddddLT',
            lastDay: '[昨天]LT',
            lastWeek: '[上]ddddLT',
            sameElse: 'L'
        },
        dayOfMonthOrdinalParse: /\d{1,2}(日|月|周)/,
        ordinal: function (number, period) {
            switch (period) {
                case 'd':
                case 'D':
                case 'DDD':
                    return number + '日';
                case 'M':
                    return number + '月';
                case 'w':
                case 'W':
                    return number + '周';
                default:
                    return number;
            }
        },
        relativeTime: {
            future: '%s内',
            past: '%s前',
            s: '几秒',
            ss: '%d秒',
            m: '1分钟',
            mm: '%d分钟',
            h: '1小时',
            hh: '%d小时',
            d: '1天',
            dd: '%d天',
            M: '1个月',
            MM: '%d个月',
            y: '1年',
            yy: '%d年'
        },
        week: {
            // GB/T 7408-1994《数据元和交换格式·信息交换·日期和时间表示法》与ISO 8601:1988等效
            dow: 1, // Monday is the first day of the week.
            doy: 4  // The week that contains Jan 4th is the first week of the year.
        }
    })

    function resize(){
        var h = $(window).height()
        $(".chatBox").height(h-165)
        $(".adsBox").height(h-165)
        // console.log(mmg)
        if(IEVersion() && IEVersion()<8){
            $("#msgInput").attr('rows','4')
        }
    }

    function timeFormat(){
        $("#timeBox").text(moment().format('YYYY年M月D日 aHH:mm'))
    }

    function health(){
        if(Cookie.get('bladeAuth')){
            api.health({},function(){

            })
        }
    }

    function online(){
        if(Cookie.get('bladeAuth')){
            api.online({},function(res){
                if(res.code==200){
                    $("#online").text(res.data)
                }
            })
        }
    }


    function showDownload(){
        layer.open({
            type: 2,
            title: '移动端下载',
            area: ['400px', '600px'],
            content: 'mobile.html'
        })
    }

    function logout(){
        layer.confirm('确定要退出吗？', function(){
            api.logout({},function (res){
                Cookie.remove('bladeAuth')
                location.reload()
            })
        })
    }

    function showMember(){
        if(Cookie.get('bladeAuth')){
            layer.open({
                type: 2,
                title: '会员状态',
                area: ['400px', '600px'],
                content: 'member.html',
                cancel:function(index){
                    stockList(true)
                }
            })
        } else{
            showLogin()
        }
    }

    function showLogin(){
        layer.open({
            type: 2,
            title: '登录',
            resize: false,
            area: ['500px', '300px'],
            content: 'login.html'
        })
    }

    function statistics(){
        api.statistics({},function (res){
            if(res.code==200){
                var data = res.data
                $("#inquiriesNum").text(data.inquiriesNum)
                $("#complainedNum").text(data.complainedNum)
                $("#uploadStockNum").text(data.uploadStockNum)
                $("#onlineDeviceNum").text(data.onlineDeviceNum)
            }
        })
    }

    function stockList(table){
        var post = {
            current: current,
            size: size,
            company: $("#company").val(),
            varieties: $("#varieties").val(),
            spec: $("#spec").val(),
            textureMaterial: $("#textureMaterial").val(),
            place: $("#place").val()
        }
        api.stockList(post,function (res){
            if(res.code==200){
                layer.close(loading)
                if(table){
                    mmg.load(res.data.records)
                } else{
                    createTable(res.data)
                }
            }
        })
    }


    function createTable(data){
        mmg = $('.mmg').mmGrid({
            height: $(window).height()-200,
            showBackboard: false,
            cols: [
                {
                    title:'品种',
                    name:'varieties',
                    width:100,
                    align:'left'
                },
                {
                    title:'产地',
                    name:'place',
                    width:100,
                    align:'center'
                },
                {
                    title:'规格',
                    name:'spec',
                    width: 50,
                    align:'center'
                },
                {
                    title:'材质',
                    name:'textureMaterial',
                    width: 60,
                    align:'center'
                },
                {
                    title:'库存数量',
                    name:'quantity',
                    width: 60,
                    align:'center'
                },
                {
                    title:'公司简称',
                    name:'company',
                    width: 100,
                    align:'center',
                    renderer: function(val,item,rowIndex){
                        return '<a href="#" onclick="showCompany(\''+item.companyId+'\')">'+item.company+'</a>'
                    }
                },
                {
                    title:'价格',
                    name:'floorPrice',
                    width: 60,
                    align:'center',
                    renderer: function(val,item,rowIndex){
                        return '<button class="btn btn-primary" onclick="showEnquiry('+item.companyId+')">询价</button>'
                    }
                },
                {
                    title:'发布时间',
                    name:'createTime',
                    width: 80,
                    align:'center'
                },
                {
                    title:'操作',
                    width: 60,
                    align:'center',
                    lockWidth:true,
                    lockDisplay: true,
                    renderer: function(val,item,rowIndex){
                        return '<button class="btn btn-danger" onclick="showComplaint('+item.id+')">投诉</button>'
                    }
                }
            ],
            items: data.records,
            fullWidthRows: true,
            plugins: [
                laypage.render({
                    elem: 'pg',
                    count: data.total,
                    limit: size,
                    curr: current,
                    layout: [ 'prev', 'page', 'limit', 'next'],
                    jump: function(obj,first){
                        size = obj.limit
                        if(!first){
                            current = obj.curr
                            stockList(true)
                        }
                    }
                })
            ]
        })
    }

    function receiveMsg(){
        var post = {
            msgId: msgId
        }
        api.receiveMsg(JSON.stringify(post),function (res) {
            if(res.code==200){
                var msgs = res.data
                if(msgs.length>0){
                    msgId = msgs[msgs.length-1].id
                    for(var i=0;i<msgs.length;i++){
                        var html = '<div class="msgBox left">'+
                                        '<img src="./images/user.jpg" alt="">'+
                                        '<div>'+ msgs[i].senderName+'</div>'+
                                        '<div class="message">'+ msgs[i].senderContent +'</div>'+
                                    '</div>'
                        $("#msgBox").append(html)
                    }
                    $("#msgBox").scrollTop($("#msgBox").prop("scrollHeight"))
                }

            }
        })
    }

    function sendMsg(){
        if(Cookie.get('bladeAuth')){
            if(Cookie.get('level')==0){
                showMember()
            } else {
                var post = {
                    senderContent: $('#msgInput').val()
                }
                if(post.senderContent==''){
                    layer.tips('消息不能为空。', '#msgInput', {
                        tips: [1, '#3595CC'],
                        time: 2000
                    })
                } else {
                    api.sendMsg(JSON.stringify(post),function (res) {
                        if(res.code==200){
                            var html = '<div class="msgBox right">'+
                                            '<img src="./images/user.jpg" alt="">'+
                                            '<div class="message">'+ post.senderContent +'</div>'+
                                        '</div>'
                            $("#msgBox").append(html)
                            $('#msgInput').val('')
                            $("#msgBox").scrollTop($("#msgBox").prop("scrollHeight"))
                        }
                    })
                }
            }
        } else{
            showLogin()
        }
    }

    function showCompany(id){
        if(Cookie.get('bladeAuth')){
            if(Cookie.get('level')==0){
                showMember()
            } else{
                layer.open({
                    type: 2,
                    title: '公司简介',
                    area: ['760px', '600px'],
                    content: 'company.html?id='+id
                })
            }
        } else {
            showLogin()
        }
    }

    function showEnquiry(id){
        if(Cookie.get('bladeAuth')){
            if(Cookie.get('level')==0){
                showMember()
            } else{
                layer.open({
                    type: 2,
                    title: '询价',
                    area: ['760px', '300px'],
                    content: 'enquiry.html?id='+id
                })
            }
        } else {
            showLogin()
        }
    }

    function showComplaint(id){
        // layer.open({
        //     type: 2,
        //     title: '投诉',
        //     area: ['760px', '600px'],
        //     content: 'complaint.html?id='+id
        // })
        if(Cookie.get('bladeAuth')){
            if(Cookie.get('level')==0){
                showMember()
            } else{
                layer.open({
                    type: 2,
                    title: '投诉',
                    area: ['760px', '600px'],
                    content: 'complaint.html?id='+id
                })
            }
        } else {
            showLogin()
        }
    }

    function search(){
        loading = layer.load(0, {shade: [0.5,'#fff']})
        stockList(true)
    }

    $(document).on('keydown', function(ev){
        if(ev.keyCode==27){
            layer.closeAll()
        }
    })

    window.onresize = function (){
        resize()
    }

    window.onload = function (){
        // Cookie.set('level','0')
        // Cookie.set('bladeAuth','eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzUxMiJ9.eyJpc3MiOiJpc3N1c2VyIiwiYXVkIjoiYXVkaWVuY2UiLCJ0ZW5hbnRfaWQiOiIwMDAwMDAiLCJ1c2VyX2lkIjoiMTYyNjExNDU5OTYzMTc2NTUwNTp3ZWIiLCJsZXZlbCI6MCwibWVtYmVyX2V4cGlyZXMiOjAsInVzZXJfbmFtZSI6IjE4MjgwMzMyOTE3IiwidG9rZW5fdHlwZSI6ImFjY2Vzc190b2tlbiIsImFjY291bnQiOiIxODI4MDMzMjkxNyIsImNsaWVudF9pZCI6InNhYmVyIiwiZXhwIjoxNjc3NjQxMjcwLCJuYmYiOjE2NzcwMzY0NzB9.RWQmhW6_a_M7_nWGo1r-mt-8ijdjzXK9ZarnNBhGNrS3M5rhebieFkcyWKahwR1MardXQuUWDk7UHAIsE97LcQ')
        // Cookie.set('tenantId','000000')
        // Cookie.set('userId','1626114599631765505')
        // Cookie.set('userName','18280332917')
        // Cookie.set('account','18280332917')

        resize()
        timeFormat()
        health()
        online()
        setInterval(function (){
            timeFormat()
            var s = moment().format('ss')
            if(s%10==0){
                receiveMsg()
            }
            if(s%30==0){
                health()
                online()
            }

        },1000)
        if(!Cookie.get('bladeAuth')){
            $("#logout")[0].style.display = 'none'
        }


        layui.use(['laypage', 'layer', 'table'], function(){
            laypage = layui.laypage
            layer = layui.layer
            laytable = layui.table
            stockList()
            statistics()
            receiveMsg()
        })
    }
</script>
</body>
</html>
